<template>
  <div class="app-container">
    <el-button
      :loading="downloadLoading"
      class="handle-button"
      @click="exportExcel(followupData)"
      icon="el-icon-download"
      type="primary"
    ></el-button>
    <el-table
      :data="tables.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      id="out-table"
      border
    >
      <el-table-column prop="name" label="学员姓名" align="center"></el-table-column>
      <el-table-column prop="education" label="学历" align="center">
        <template slot-scope="scope">{{ scope.row.education | educationFilter }}</template>
      </el-table-column>
      <el-table-column prop="objective" label="学习目的" align="center">
        <template slot-scope="scope">{{ scope.row.objective | objectiveFilter }}</template>
      </el-table-column>
      <el-table-column prop="specialty" label="专业" align="center"></el-table-column>
      <el-table-column prop="JobNature" label="工作性质" align="center"></el-table-column>
      <el-table-column prop="other" label="其他" align="center"></el-table-column>
      <el-table-column label="操作" align="center" min-width="135px">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="请输入姓名搜索" />
        </template>
        <template slot-scope="scope">
          <el-button
            title="详情"
            @click="handleMessage(scope.row)"
            size="mini"
            type="info"
            circle
            icon="el-icon-tickets"
          ></el-button>
          <el-button
            title="删除"
            type="danger"
            icon="el-icon-delete"
            size="mini"
            circle
            @click="deleteTall(scope.row)"
            v-if="local.position!=2"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="block" style="margin-top:15px" v-if="followupData.length>10">
      <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 侧消息 -->
    <el-drawer
      :title="form.name + ' 首访情况'"
      :visible.sync="messageBox"
      direction="rtl"
      size="50%"
      :xs="24"
      :sm="24"
    >
      <el-collapse v-model="activeName" accordion style="padding:0 15px">
        <el-collapse-item title="首访表情况" name="1">
          <!-- 第二个 -->
          <el-form ref="tallForm" :model="tallForm" label-width="80px">
            <el-form-item label="学历">
              <el-select v-model="tallForm.education" placeholder="请选择学历">
                <el-option label="大专" value="0"></el-option>
                <el-option label="本科" value="1"></el-option>
                <el-option label="高中/中专" value="2"></el-option>
                <el-option label="研究生" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学习目的">
              <el-select v-model="tallForm.objective" placeholder="请选择学习目的">
                <el-option label="充电提升" value="0"></el-option>
                <el-option label="转行" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="专业">
              <el-input v-model="tallForm.specialty"></el-input>
            </el-form-item>
            <el-form-item label="工作性质">
              <el-input v-model="tallForm.JobNature"></el-input>
            </el-form-item>
            <el-form-item label="其他">
              <el-input type="textarea" v-model="tallForm.other"></el-input>
            </el-form-item>
            <el-form-item v-if="local.position!=2">
              <template slot-scope="scope">
                <el-button type="primary" @click="onSubmit(scope.row)">立即创建</el-button>
                <el-button @click="clearTall">取消</el-button>
              </template>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: "",
      downloadLoading: false,
      followupData: [],
      form: {
        name: ""
      },
      // 首访表字段信息
      tallForm: {
        education: "",
        objective: "",
        specialty: "",
        JobNature: "",
        other: ""
      },
      // 学员首访情况
      messageBox: false,
      activeName: "1",
      // 分页
      currentPage: 1, // 默认第一页
      pageSize: 10, // 每页大小默认值
      // 权限判断
      local: localStorage
    };
  },
  created() {
    this.reload();
  },
  watch: {
    // 检测表格数据过滤变化，自动跳到第一页
    tables() {
      this.currentPage = 1;
    }
  },
  computed: {
    // 搜索过滤
    tables() {
      const search = this.search;
      if (search) {
        return this.followupData.filter(dataNews => {
          return String(dataNews.name)
            .toLowerCase()
            .includes(search.toLowerCase());
        });
      }
      return this.followupData;
    },
    // 总条数
    total() {
      return this.tables.length;
    }
  },
  methods: {
    reload() {
      this.followupData = [];
      this.axios.get("/student/getTall").then(res => {
        for (var i = 0; i < res.data.data.length; i++) {
          if (
            res.data.data[i].teacher == localStorage.username ||
            res.data.data[i].manager == localStorage.username
          ) {
            this.followupData.push(res.data.data[i]);
          }
          if (localStorage.position == "2") {
            this.followupData.push(res.data.data[i]);
          }
        }
      });
    },
    // 打开学员首访情况
    handleMessage(item) {
      this.messageBox = true;
      this.form.name = item.name;
      this.axios
        .get("/student/getTall", { params: { name: item.name } })
        .then(res => {
          if (res.data.data.length > 0) {
            this.tallForm.education = res.data.data[0].education;
            this.tallForm.objective = res.data.data[0].objective;
            this.tallForm.specialty = res.data.data[0].specialty;
            this.tallForm.JobNature = res.data.data[0].JobNature;
            this.tallForm.other = res.data.data[0].other;
          } else {
            this.clearTall();
          }
        });
    },
    // 首访表 立即创建
    onSubmit() {
      var _this = this;
      var name = _this.form.name;
      var education = _this.tallForm.education;
      var objective = _this.tallForm.objective;
      var specialty = _this.tallForm.specialty;
      var JobNature = _this.tallForm.JobNature;
      var other = _this.tallForm.other;

      _this.axios
        .post(
          "/student/insertTall",
          `name=${name}&education=${education}&objective=${objective}&specialty=${specialty}&JobNature=${JobNature}&other=${other}`
        )
        .then(res => {
          if (res.data.ok == 1) {
            _this.$notify({
              title: "添加成功",
              message: `${name + res.data.msg}`,
              type: "success"
            });
            _this.clearTall();
            _this.messageBox = false;
            _this.reload();
          } else {
            _this.$notify({
              title: "添加失败",
              message: res.data.msg,
              type: "error"
            });
          }
        });
    },
    // 删除数据
    deleteTall(item) {
      var _this = this;
      _this
        .$confirm(`是否删除此条学员回访记录`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          _this.axios.post("/student/deleteTall", `id=${item.id}`).then(res => {
            if (res.data.ok == 1) {
              _this.$notify({
                title: "删除成功",
                message: `${item.name + res.data.msg}`,
                type: "success"
              });
              _this.reload();
              _this.messageBox = false;
            } else {
              _this.$notify({
                title: "删除失败",
                message: res.data.msg,
                type: "error"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 取消清空首访数据
    clearTall() {
      for (var item in this.tallForm) {
        this.tallForm[item] = "";
      }
    },
    // 分页
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>

<style>
.handle-button {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 15px;
  border-radius: 6px 0 0 6px !important;
  z-index: 999999;
  color: #fff;
}
</style>